import React from 'react';
import { connect } from 'react-redux';
import { messages } from 'share/common';
import { Form, Button, Spin, Select } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import errorMessage from 'share/errorMessage';
import 'styles/setting/workflow-config/new-workflow-config.scss';
import workflowMatrixService from 'containers/setting/workflow-matrix/workflow-matrix.service';
import baseService from 'share/base.service';
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14, offset: 1 },
};

const selectOptions = [{
  value: 3001,
  label: messages('request-4.key562')/*顺序*/
}, {
  value: 3002,
  label: messages('request-4.key563')/*并列*/
}];

const symbolScopeMap = {
  9001: '>',
  9002: '>=',
  9003: '<',
  9004: '<=',
  9005: '='
}

class EditCondition extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowLoading: false,
      configFp: [],
      configFunctionProfile: {},
      levelConfig: {},
      saveLoading: false,
      topPermission: '', levelCode: '', levelOrgId: '', defaultValue: {},
      loading: false,
      conditionDetail: {},
      costCenters: []
    }
  }

  componentDidMount() {
    if (this.props.setOfBooksId) {
      baseService.getCostCenter(this.props.setOfBooksId).then((res) => {
        this.setState({ costCenters: res.data})
      })
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      conditionDetail: nextProps.conditionDetail,
    })
  }

  //保存
  handleSave = e => {
    e.preventDefault();
    const { form } = this.props;
    const { conditionDetail } = this.state;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { head } = this.state;
        let params = Object.assign({}, head, conditionDetail, values,);
        this.setState({
          saveLoading: true,
        });
        workflowMatrixService.postEditConditionDimension(params).then(res => {
          this.setState({ saveLoading: false });
          this.props.close(true);
        }).catch(e => {
          this.setState({ saveLoading: false });
          errorMessage(e.response)
        })

      }
    })
  };

  render() {
    const { saveLoading, loading, configFunctionProfile, conditionDetail, costCenters } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="new-workflow-config">
        {conditionDetail.approvalMatrixDimensionId && <Form className="new-form">
          <Spin spinning={loading}>
            <FormItem
              {...formItemLayout}
              label={messages('common.column.status')/*状态*/}>
              {getFieldDecorator('name', {
                initialValue: conditionDetail.status,
              })(
                <div>{conditionDetail.status === 1 ? messages('request-4.key226')/*启用temp*/ : messages('request-4.key227')/*禁用temp*/}</div>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={messages('request-4.key564')/*条件名称*/}>
              {getFieldDecorator('name', {
                initialValue: conditionDetail.name,
              })(
                <Select disabled={conditionDetail.symbolScope.length === 1}>
                  {conditionDetail.symbolScope.map(item => {
                    return <Option key={item} value={item}>{symbolScopeMap[item]}</Option>
                  })}
                </Select>
              )}
            </FormItem>

            {this.props.setOfBooksId &&
            <div>
              <FormItem
                {...formItemLayout}
                label={messages('request-4.key565')/*对应成本中心*/}
                extra={conditionDetail.status === 1 ?
                  <div style={{fontSize: '14px', color: '#b5b5b5'}}>{messages('request-4.key566')/*启用中的条件维度不可更改对应成本中心*/}</div> :
                  <div style={{fontSize: '14px', color: '#b5b5b5'}}>{messages('request-4.key567')/*启用条件前需要先选择条件对应成本中心*/}</div>}>
                {getFieldDecorator('costCenterOID', {
                  initialValue: conditionDetail.costCenterOID === null ? undefined : conditionDetail.costCenterOID, // 如果是null，select的placeholder不显示
                  rules: [{
                    required: true,
                    message: messages('common.select')/*请选择*/,
                  }]
                })(
                  <Select disabled={conditionDetail.status === 1} placeholder={messages('common.select')/*请选择*/}>
                    {costCenters.map(item => {
                        return <Option key={item.id} value={item.costCenterOID}>{item.name}</Option>
                      })
                    }
                  </Select>
                )}
              </FormItem>
              </div>
            }

            <FormItem
              {...formItemLayout}
              label={messages('request-4.key568')/*操作符*/}>
              {getFieldDecorator('symbols', {
                initialValue: conditionDetail.symbols,
                rules: [{
                  required: true,
                  message: messages('common.select')/*请选择*/,
                }]
              })(
                <Select disabled={conditionDetail.symbolScope.length === 1}>
                  {conditionDetail.symbolScope.map(item => {
                    return <Option key={item} value={item}>{symbolScopeMap[item]}</Option>
                  })}
                </Select>
              )}
            </FormItem>
          </Spin>
          <div className="footer-operate" style={{ backgroundColor: '#ffffff', left: '0px' }}>
            {!configFunctionProfile.readOnly && <Button
              type="primary"
              onClick={this.handleSave}
              style={{ margin: '0px 10px' }}
              loading={saveLoading}
            >
              {messages('common.ok')/*确定*/}
            </Button>}
            <Button onClick={this.props.close}>{messages('common.cancel')/*取消*/}</Button>
          </div>
        </Form>}
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
    tenantMode: state.main.tenantMode,
    authPolicyAll: state.main.authPolicyAll,
    currentMenuPermission: state.main.currentMenuPermission,
  }
}
const wrappedEditCondition = Form.create()(EditCondition);
export default connect(mapStateToProps)(wrappedEditCondition);
